import { Component } from 'react';
import { Tabs,Tab,Icon } from '@blueprintjs/core';
import AreaList from './AreaList';
import NameList from './NameList';
import styles from './LeftPan.less';
import { connect } from 'dva';
import { updateState } from '../../../models/global';

class LeftPan extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tab: "list", // list, setting
            currentRegion: '', // 玄武门街道 //建邺区
            currentType: '',
            currentCountry: '',
            map: props.map,
            settingName: "",
            settingShow: false,
        }
    }

	handleTabChange = (tab, id, type) => {
		if(tab === 'list' || tab === 'ssearch') {
			this.setState({tab});
      updateState({ssearch_map: null})
			// this.setState({tab, currentRegion: ''});
			// this.setState({settingShow: false, settingName: ''});
		}
    if(tab === 'ssearch') {
      this.setState({tab});
      updateState({ssearch_map: 1})
    }
		if(tab === 'setting' && id !=="list") {
      updateState({ssearch_map: null})
			this.setState({tab, currentRegion: id, currentType: type});
		}
		if(tab === 'setting' && id === "list") {
      updateState({ssearch_map: null})
			this.setState({tab});
		}
	}

	SetSettingParams = (params) => {
		this.setState({currentRegion: params.id,currentType:params.type})
	}

	SetSettingName = (name, country) => {
		this.setState({settingShow: true, settingName: name, currentCountry: country});
	}

    render() {
      const { sysType } = this.props;
		const layer_list = <span className={styles.title}><Icon icon="inbox-geo"></Icon>&nbsp;行政区划</span>
		const ssearch_list =
    <span style={sysType === 'ssearch' ? {display:'block'} : {display:'none'}} className={styles.title}>
      <Icon icon="list"></Icon>&nbsp;高级查询列表
    </span>
		const layer_setting =
		<span style={this.state.settingShow ? {display:'block'} : {display:'none'}} className={styles.title}>
			<Icon icon="properties"></Icon>&nbsp;{this.state.settingName}
		</span>;
		const {currentRegion, tab, currentType, currentCountry} = this.state;
		const {setSelectedFeature} = this.props;
        return (
			<Tabs large className={styles.main} onChange={this.handleTabChange} selectedTabId={this.state.tab}>
				<Tab icon="layer" id="list" title={layer_list}
				panel={<AreaList
					SetSettingParams={this.SetSettingParams}
					SetSettingName={this.SetSettingName}
					handleTabChange={this.handleTabChange}
					setSelectedFeature = {setSelectedFeature}
				 />} />
				<Tab id="setting"
					title={layer_setting}
					/* disabled = {!currentStreet} */
					panel={tab === 'setting' && <NameList
						street = {currentRegion}
						type = {currentType}
						districts = {currentCountry}
						setSelectedFeature = {setSelectedFeature}
						handleTabChange={this.handleTabChange}
						/>} />
          <Tab id="ssearch" title={ssearch_list}
          panel={<div>高级检索列表</div>} />
			</Tabs>
        )
    }
}


function mapStateToProps(state) {
    return {
        sysType: state.map.sysType
    };
}

export default connect(mapStateToProps)(LeftPan);
